<%-- 
    Document   : 011
    Created on : 12-jul-2012, 11:58:27
    Author     : Froy
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ejercicio 11 - Estados de la petición AJAX</title>
        <style type="text/css">
            body { font: 13px Arial, Helvetica, sans-serif; }
            h2 { margin-bottom: 0; font-size: 1.2em; }
            #recurso, #enviar { padding: .3em; font-size: 1.2em; }
            #principal { float: left; width: 70%; }
            #secundario { float: right; width: 25%; }
            #contenidos, #estados, #cabeceras, #codigo {
                border: 2px solid #CCC;
                background: #FAFAFA;
                padding: 1em;
                white-space: pre;
            }
            #contenidos {
                min-height: 400px;
                max-height: 600px;
                overflow: scroll;
            }
            #estados { min-height: 200px; }
            #cabeceras { min-height: 200px; }
            #codigo { min-height: 100px; font-size: 1.5em; }
        </style>
        <script type="text/javascript">
            String.prototype.transformaCaracteresEspeciales = function() {
                return unescape(escape(this).
                    replace(/%0A/g, '<br/>').
                    replace(/%3C/g, '&lt;').
                    replace(/%3E/g, '&gt;'));
            }
 
            var estadosPosibles = ['No inicializado', 'Cargando'
                , 'Cargado', 'Interactivo', 'Completado'];
            var tiempoInicial = 0;
 
            window.onload = function() {
                // Cargar en el input text la URL de la página
                var recurso = document.getElementById('recurso');
                recurso.value = location.href;
 
                // Cargar el recurso solicitado cuando se pulse el botón MOSTRAR CONTENIDOS
                document.getElementById('enviar').onclick = cargaContenido;
            }
 
            function cargaContenido() {
                // Borrar datos anteriores
                document.getElementById('contenidos').innerHTML = "";
                document.getElementById('estados').innerHTML = "";
 
                // Instanciar objeto XMLHttpRequest
                if(window.XMLHttpRequest) {
                    peticion = new XMLHttpRequest();
                }
                else {
                    peticion = new ActiveXObject("Microsoft.XMLHTTP");
                }
 
                // Preparar función de respuesta
                peticion.onreadystatechange = muestraContenido;
 
                // Realizar petición
                tiempoInicial = new Date();
                var recurso = document.getElementById('recurso').value;
                peticion.open('GET', recurso+'?nocache='+Math.random(), true);
                peticion.send(null);
            }
 
            // Función de respuesta
            function muestraContenido() {
                var tiempoFinal = new Date();
                var milisegundos = tiempoFinal - tiempoInicial;
 
                var estados = document.getElementById('estados');
                estados.innerHTML += "[" + milisegundos + " mseg.] " + estadosPosibles[peticion.readyState] + "<br/>";
 
                if(peticion.readyState == 4) {
                    if(peticion.status == 200) {
                        var contenidos = document.getElementById('contenidos');
                        contenidos.innerHTML = peticion.responseText.transformaCaracteresEspeciales();
                    }
                    muestraCabeceras();
                    muestraCodigoEstado();
                }
            }
 
            function muestraCabeceras() {
                var cabeceras = document.getElementById('cabeceras');
                cabeceras.innerHTML = peticion.getAllResponseHeaders().transformaCaracteresEspeciales();
            }
 
            function muestraCodigoEstado() {
                var codigo = document.getElementById('codigo');
                codigo.innerHTML = peticion.status + "<br/>" + peticion.statusText;        
            }
        </script>
    </head>
    <body>
        <form action="#">
            URL: <input type="text" id="recurso" size="70" />
            <input type="button" id="enviar" value="Mostrar contenidos" />
        </form>

        <div id="principal">
            <h2>Contenidos del archivo:</h2>
            <div id="contenidos"></div>

            <h2>Cabeceras HTTP de la respuesta del servidor:</h2>
            <div id="cabeceras"></div>
        </div>

        <div id="secundario">
            <h2>Estados de la petición:</h2>
            <div id="estados"></div>

            <h2>Código de estado:</h2>
            <div id="codigo"></div>
        </div>
    </body>
</html>